<template>
    <div class="book_detail">            
        <div class="header">
            <img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back()"> 代客预定
            <span class="cancel" @click="cancel" v-if="state==0 && canBeCancel==1 && date_time ">取消订单</span>
        </div>
        <div class="content">
            <div class="name">
                <div class="left">                     
                    <p class="sk" v-if="orderDetailEntity.replaceType ==1">散客</p>
                    <p class="sk" v-if="orderDetailEntity.replaceType ==2">{{ orderDetailEntity.agreementName }}</p>                 
                    <p class="zf" v-if="orderDetailEntity.state == 0">未支付</p>
                    <p class="zf" v-if="orderDetailEntity.state == 1">待入住</p>
                    <p class="zf" v-if="orderDetailEntity.state == 2">已入住</p>
                    <p class="zf" v-if="orderDetailEntity.state == 3">已取消</p>
                    <p class="zf" v-if="orderDetailEntity.state == 4">退房</p>
                    <p class="zf" v-if="orderDetailEntity.state == 5">已失效</p>
                    <p class="zf" v-if="orderDetailEntity.state == 6">已评价</p>
                    <p class="zf" v-if="orderDetailEntity.state == 7">待确认(道旅订单)</p>
                </div>
                <div class="right">
                  <img src="@/assets/StayIn.png" alt="" v-if="type ==1">
                  <img src="@/assets/CheckOut.png" alt="" v-if="type ==2">
                  <img src="@/assets/Invalid.png" alt="" v-if="type ==3">
                </div>
            </div>
            <div class="room">
                <div class="room_left">
                    <img :src="imgUrl" alt="">
                </div>
                <div class="room_right">
                    <p class="room_right_t">{{ orderDetailEntity.roomName }}({{ orderDetailEntity.breakfast }})</p>
                    <p class="room_right_text">{{ orderDetailEntity.liveTime }}至{{ orderDetailEntity.leaveTime }}<span class="times">{{ orderDetailEntity.bookingRoomsNum }}</span></p>
                    <p class="room_right_text">床型：{{ orderDetailEntity.bedName  }}<span class="type">早餐：{{ orderDetailEntity.morning }}</span></p>
                </div>
            </div>
            <div class="total"  @click="shrink">
              <div>
                <p class="total_left">订单总计</p>
                <div class="total_right">             
                  <span>￥{{ orderDetailEntity.floorPrice}}</span> <span style="color:#2c2c2c">(房费￥{{orderDetailEntity.sellPrice}} + 押金￥{{accSub(orderDetailEntity.floorPrice,orderDetailEntity.sellPrice)}})</span>
                  <img src="@/assets/ReserveDown.png" alt="" v-show="!flg">
                  <img src="@/assets/ReserveUp.png" alt="" v-show="flg">
                </div>
              </div>                          
            </div>
            <ul class="Detailed" v-if="flg">
              <li v-for="(item,index) in roomp" :key="index">
                <p>{{ item.formatDate}}  {{ orderDetailEntity.breakfast }}</p>
                <div>{{ number }}x￥{{ item.salePrice }}</div>
              </li>
            </ul>
            <div class="see" @click="see">
              <p class="see_left">入住信息</p>
              <div class="see_right">
                <span>查看</span>
                <img src="@/assets/ReserveDown.png" alt="" v-show="!see_flg">
                <img src="@/assets/ReserveUp.png" alt="" v-show="see_flg">
              </div>
              <ul class="check" v-if="see_flg">
                <li v-for="(item,index) in personList" :key="index">
                  <span class="cont" style="flex:none">{{ item }}</span>
                  <span class="cont-time">
                    {{ orderDetailEntity.liveTime.substring(orderDetailEntity.liveTime.length-5) }}至{{ orderDetailEntity.leaveTime.substring(orderDetailEntity.leaveTime.length-5) }}
                  </span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity=='' || orderDetailEntity.orderCheckEntity[0].roomNum  == null">暂无</span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].roomNum != null">{{ orderDetailEntity.orderCheckEntity[0].roomNum }}</span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity==''">未支付</span>  
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].isPay==1">未支付</span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].isPay==2">已支付</span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity==''">未出账单</span>          
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==0 
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==6">未出账单</span>
                  <span class="cont" v-if="orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==1 
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==2
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==3
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==4
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==5
                  || orderDetailEntity.orderCheckEntity!='' && orderDetailEntity.orderCheckEntity[0].state==7
                  ">已出账单</span>
                </li>
              </ul>
            </div>
            <div class="other">
              <div class="other_title"><span>其他预定信息</span></div>
              <div class="other_cont">
                <p>联系电话：<span>{{ orderDetailEntity.stayMobile }}</span></p>
                <p>订单编号：<span>{{ orderDetailEntity.orderNum }}</span></p>
                <p>下单时间：<span>{{ orderDetailEntity.createTime }}</span></p>
                <p>取消规则：
                  <span v-if="canBeCancel==0">不可取消</span>
                  <span v-if="canBeCancel==1">{{ orderDetailEntity.advanceCancelHours }}:{{ orderDetailEntity.advanceCancelMinutes==0?orderDetailEntity.advanceCancelMinutes='00':orderDetailEntity.advanceCancelMinutes }}前可取消</span>
                </p>
              </div>
            </div>
            <x-button type="primary" @click.native="onItemClick" v-if="state == 0">订单分享</x-button> 
            <!-- 提示分享 -->
            <div v-transfer-dom>
              <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">
                <div style="color:#fff;text-align:center;height:100%;" @click="showDialogStyle = false">
                  <div class="content">
                      <p  class="tishi"><img src="@/assets/tishi.png" alt="" style="width:3rem"></p>
                      <p style="font-size:.48rem">请点击右上角分享</p>
                  </div>
                </div>
              </x-dialog>
            </div>
            <div v-transfer-dom>
              <confirm v-model="show"
              title="温馨提示"
              @on-cancel="onCancel"
              @on-confirm="onConfirm"
              >
                <p style="text-align:center;">确定要取消订单吗？</p>
              </confirm>
            </div>
        </div>
        <toast v-model="showPositionValue" type="text" :text="toast_text"></toast>
    </div>
</template>
<script>
import { getOrderInfo, updateOrderInfo } from "@/service/home.js";
import {
  XButton,
  XDialog,
  TransferDomDirective as TransferDom,
  Confirm,
  Toast
} from "vux";
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
  directives: {
    TransferDom
  },
  components: { XButton, XDialog, Confirm, Toast },
  data() {
    return {
      flg: false,
      see_flg: false,
      orderDetailEntity: "",
      roomp: "",
      personList: "",
      type: localStorage.getItem("type"),
      imgUrl: localStorage.getItem("imgUrl"),
      url: "", //图片地址
      number: "", //房间数量
      Total: "", //订单总计
      state: "",
      state_text: "",
      bill: "",
      orderNum: "",
      canBeCancel: 0,
      showDialogStyle: false,
      date: "",
      hotelName: localStorage.getItem("hotelName"),
      date_time: false,
      liveTime: "", //预订开始时间
      show: false,
      showPositionValue: false,
      toast_text: ""
    };
  },
  created() {
    let userId = localStorage.getItem("userId");
    if (userId) {
      localStorage.setItem("IosUserId", userId);
    }
    this._getOrderInfo();
  },
  methods: {
    _getOrderInfo() {
      var data = {
        orderId: localStorage.getItem("orderId")
      };
      getOrderInfo(data).then(res => {
        this.orderDetailEntity = res.data.orderDetailEntity;
        var url = res.data.orderDetailEntity.url;
        this.url = url.substring(0, url.lastIndexOf(";"));
        this.personList = res.data.orderDetailEntity.personList;
        this.orderNum = res.data.orderDetailEntity.orderNum;
        this.id = res.data.orderDetailEntity.id;
        this.canBeCancel =
          this.orderDetailEntity.canBeCancel == 1
            ? (this.canBeCancel = 1)
            : (this.canBeCancel = 0);
        this.state = res.data.orderDetailEntity.state;
        this.roomp = res.data.orderDetailEntity.roomp;
        this.roomp = this.unique(this.roomp);
        var number = res.data.orderDetailEntity.bookingRoomsNum.indexOf("间");
        this.number = res.data.orderDetailEntity.bookingRoomsNum.substring(
          0,
          number
        );
        this.GetDate();
        this.wechat();
      });
    },
    unique(arr) {
      const res = new Map();
      return arr.filter(
        arr => !res.has(arr.formatDate) && res.set(arr.formatDate, 1)
      );
    },
    back() {
      this.$router.push({ path: "/my/SubstituteBooking/index" });
    },
    //点击取消订单
    cancel() {
      this.show = true;
    },
    shrink() {
      this.flg = !this.flg;
    },
    see() {
      this.see_flg = !this.see_flg;
    },
    onItemClick() {
      let ioscompanyId = localStorage.getItem("ioscompanyId");
      if (ioscompanyId) {
        let hotelName = localStorage.getItem("hotelName");
        let roomChangeValue = this.roomChangeValue;
        sharedAction(
          `您已经成功预订${hotelName}`,
          // "http://staff.ihotelvip.com/my/QrCode?id=" + this.orderNum,
          "http://test.staff.ihotelvip.com/my/SubstituteBooking/code?orderNum=" +
            this.orderNum,
          `您预定的"${roomChangeValue}",请在30分钟内扫码支付，否则订单过期失效`
        );
      } else {
        this.showDialogStyle = true;
      }
    },
    wechat() {
      var url = window.location.href;
      var hotelName = this.hotelName;
      var roomChangeValue = this.orderDetailEntity.roomName;
      axios.post("/recommend/getPriceAgreement?url=" + url).then(res => {
        let links =
          "http://staff.ihotelvip.com/my/SubstituteBooking/code?orderNum=" +
          this.orderNum; //分享出去的链接
        let title = `您已经成功预订${hotelName}`; //分享的标题
        let desc = `您预定的"${roomChangeValue}",请在30分钟内扫码支付，否则订单过期失效`; //分享的详情介绍
        wx.config({
          debug: false,
          appId: "wx9a16008c72a9cf50",
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.qm,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo"
          ]
        });
        //直接调用
        wx.ready(function() {
          //分享给好友
          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareTimeline({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
          wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: links, // 分享链接
            imgUrl: "http://img.ihotelvip.com/1544419746942", // 分享图标
            success: function() {
              // 分享纪录
              alert("成功分享给朋友");
              //logUtil.printLog("分享给朋友成功返回的信息为:",res);
            },
            cancel: function() {
              alert("分享失败,您取消了分享!");
            }
          });
        });
        //失败回调
        wx.error(function(res) {});
      });
    },
    onCancel() {},
    //确定取消订单
    onConfirm() {
      var data = {
        id: this.id,
        state: 3
      };
      updateOrderInfo(data).then(res => {
        if (res.data.errCode == 0) {
          this.showPositionValue = true;
          this.toast_text = "订单取消成功";
          setTimeout(() => {
            this.$router.push({ path: "/my/SubstituteBooking/index" });
          }, 2500);
        }
      });
    },
    onHide() {
      console.log("3333");
    },
    onShow() {
      console.log("4444");
    },
    //获取当前时间
    GetDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var tHours = date.getHours(); //获取当前小时数(0-23)
      var Minutes = date.getMinutes(); //获取当前分钟数(0-59)
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (Minutes >= 1 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      this.date = year + seperator1 + month + seperator1 + strDate; //获取当前时间
      this.date = parseInt(this.date.replace(/-/g, ""));
      var liveTime = this.orderDetailEntity.liveTime;
      this.liveTime = parseInt(liveTime.replace(/-/g, ""));
      if (this.orderDetailEntity.advanceCancelMinutes == 0) {
        this.orderDetailEntity.advanceCancelMinutes = "00";
      } else {
        this.orderDetailEntity.advanceCancelMinutes = this.orderDetailEntity.advanceCancelMinutes;
      }
      var HoursTime =
        this.orderDetailEntity.advanceCancelHours.toString() +
        this.orderDetailEntity.advanceCancelMinutes.toString();
      var date_tHours = tHours.toString() + Minutes.toString();
      HoursTime = parseInt(HoursTime);
      date_tHours = parseInt(date_tHours);

      if (this.date <= this.liveTime) {
        this.date_time = true;
      } else {
        this.date_time = false;
      }
      if (this.date == this.liveTime) {
        if (date_tHours <= HoursTime) {
          this.date_time = true;
        } else {
          this.date_time = false;
        }
      }
    },
    //定义时间算法
    addDate(date, days) {
      if (days == undefined || days == "") {
        days = 0;
      }
      var date = new Date(date);
      date.setDate(date.getDate() + days);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return (
        date.getFullYear() +
        "-" +
        this.getFormatDate(month) +
        "-" +
        this.getFormatDate(day)
      );
    },
    // 计算减法
    accSub(num1, num2) {
      let r1;
      let r2;
      try {
        r1 = num1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = num2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      const m = Math.pow(10, Math.max(r1, r2));
      const n = r1 >= r2 ? r1 : r2;
      return (Math.round(num1 * m - num2 * m) / m).toFixed(n);
    }
  }
};
</script>
<style scoped lang="less">
.book_detail {
  .cancel {
    position: absolute;
    top: 0.3rem;
    right: 0.25rem;
    height: 0.28rem;
    line-height: 0.28rem;
    font-size: 0.3rem;
    color: rgba(0, 0, 0, 1);
  }
  .content {
    .name {
      width: 100%;
      height: 1rem;
      background: rgba(255, 255, 255, 1);
      border-top: 1px solid rgba(243, 243, 243, 1);
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      .left {
        width: 5.9rem;
        padding: 0.17rem 0 0.18rem 0.24rem;
        .sk {
          height: 0.28rem;
          font-size: 0.3rem;
          font-weight: 500;
          color: rgba(50, 50, 50, 1);
          line-height: 0.28rem;
          margin-bottom: 0.14rem;
        }
        .zf {
          height: 0.23rem;
          font-size: 0.24rem;
          color: rgba(161, 161, 161, 1);
          line-height: 0.24rem;
        }
      }
      .right {
        padding: 0.12rem 0.36rem 0.12rem 0;
        img {
          width: 1rem;
        }
      }
    }
    .room {
      width: 7.5rem;
      height: 1.9rem;
      background: rgba(255, 255, 255, 1);
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      .room_left {
        float: left;
        margin: 0.2rem 0.2rem 0.15rem 0.26rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          background: rgba(209, 209, 209, 1);
          border-radius: 10px;
        }
      }
      .room_right {
        width: 5.54rem;
        float: left;
        margin: 0.35rem 0 0.25rem 0;
        .room_right_t {
          height: 0.29rem;
          font-size: 0.3rem;
          color: rgba(44, 44, 44, 1);
          line-height: 0.29rem;
          .money {
            color: #fd382f;
            float: right;
            margin-right: 0.25rem;
          }
        }
        .room_right_text {
          margin-top: 0.13rem;
          height: 0.23rem;
          font-size: 0.24rem;
          line-height: 0.23rem;
          color: rgba(161, 161, 161, 1);
          .times {
            margin-left: 0.38rem;
          }
          .type {
            margin-left: 0.6rem;
          }
        }
      }
    }
    .total {
      height: 0.9rem;
      background: #fff;
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      margin-bottom: 0.1rem;
      .total_left {
        // float: left;
        display: inline-block;
        margin: 0.36rem 0 0.31rem 0.24rem;
        height: 0.23rem;
        font-size: 0.24rem;
        color: rgba(44, 44, 44, 1);
        line-height: 0.23rem;
      }
      .total_right {
        // float: right;
        width: 6.21rem;
        text-align: right;
        padding-right: 0.25rem;
        display: inline-block;
        margin: 0.33rem 0;
        height: 0.19rem;
        font-size: 0.24rem;
        color: rgba(253, 56, 47, 1);
        line-height: 0.19rem;
        img {
          width: 0.23rem;
          height: 0.13rem;
        }
      }
    }
    .Detailed {
      width: 100%;
      margin-bottom: 0.1rem;
      li {
        height: 0.9rem;
        background: #fff;
        border-bottom: 1px solid rgba(243, 243, 243, 1);
        p {
          float: left;
          // display: inline-block;
          margin: 0.36rem 0 0.31rem 0.24rem;
          height: 0.23rem;
          font-size: 0.24rem;
          color: rgba(44, 44, 44, 1);
          line-height: 0.23rem;
        }
        div {
          float: right;
          // display: inline-block;
          margin: 0.33rem 0.25rem;
          height: 0.19rem;
          font-size: 0.24rem;
          color: rgba(253, 56, 47, 1);
          line-height: 0.19rem;
        }
      }
    }
    .see {
      width: 100%;
      height: 0.9rem;
      background: #fff;
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      margin-bottom: 0.1rem;
      .see_left {
        float: left;
        margin: 0.36rem 0 0.31rem 0.24rem;
        height: 0.23rem;
        font-size: 0.24rem;
        color: rgba(44, 44, 44, 1);
        line-height: 0.23rem;
      }
      .see_right {
        float: right;
        margin: 0.33rem 0.25rem;
        height: 0.19rem;
        font-size: 0.24rem;
        color: #6d2377;
        line-height: 0.19rem;
        img {
          width: 0.23rem;
          height: 0.13rem;
        }
      }
      .check {
        float: left;
        width: 100%;
        margin-bottom: 0.1rem;
        li {
          width: 100%;
          height: 0.9rem;
          background: #fff;
          display: flex;
          padding: 0.24rem 0;
          padding-left: 0.24rem;
          .cont {
            flex: 1;
          }
          span {
            font-size: 0.24rem;
          }
          .cont-time {
            margin-right: 0.5rem;
            margin-left: 0.3rem;
          }
        }
      }
    }
    .other {
      float: left;
      width: 100%;
      .other_title {
        width: 100%;
        padding: 0.33rem 0.24rem;
        height: 0.9rem;
        background: #fff;
        border-bottom: 1px solid rgba(243, 243, 243, 1);
        span {
          height: 0.23rem;
          font-size: 0.24rem;
          color: rgba(0, 0, 0, 1);
          line-height: 0.24rem;
        }
      }
      .other_cont {
        height: 2.4rem;
        background: #fff;
        padding: 0.3rem 0.24rem;
        p {
          height: 0.23rem;
          font-size: 0.24rem;
          color: rgba(119, 119, 119, 1);
          line-height: 0.24rem;
          margin-bottom: 0.29rem;
          span {
            color: #2c2c2c;
          }
        }
      }
    }
  }
  .weui-btn_primary {
    background: #872a91 !important;
    margin-top: 4rem;
  }
  .weui-btn {
    border-radius: 0 !important;
  }
}
</style>
